*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    position: relative;
}
html,body{
    width: 100vw;
    height: 100vh;
    font-size: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(123, 115, 116, 1) 0%, rgba(123, 115, 116, 1) 0%, rgba(134, 147, 147, 1) 100%, rgba(134, 147, 147, 1) 100%);
}
header{
    width: 100vw;
    /* background-color: red; */
    padding: 0.61vh 3.7vh;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header span{
    font-size: 1.72vh;
    color: white;
    font-weight: bold;
}
header div img{
    width: 2.21vh;
    margin-left: 0.185vh;
}
header div img:nth-child(3){
    width: 2.46vh;
}
.head-box{
    height: 6.15vh;
    display: flex;
    flex-direction: column;
}
.head{
    padding: 0 1.84vh 0 3.7vh;
    box-sizing: border-box;
    /* height: 6.03vh; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.center-ct{
    text-align: center;
    align-self: center;
    position: relative;
    top: -2.09vh;
}
/* .head>div:nth-child(2){
    align-self: flex-end;
    justify-self: center;
    text-align: center;
} */
.head>div:nth-child(2){
    display: flex;
    align-items: center;
}
.head>div:first-of-type img{
    width: 1.6vh;
}
/* .head>div:nth-child(2) p:first-of-type{
    font-size: 1.97vh;
    color: #fff;
}
.head>div:nth-child(2) p:nth-child(2){
    font-size: 1.72vh;
    color: #ffffff96;
} */
.head>div:nth-child(2) img{
    width: 3.32vh;
    margin-right: 1.23vh;
}
.head>div:nth-child(2) i{
    font-size: 3.07vh;
    color: #E3E2E2;
}
.center-ct p:first-of-type{
    font-size: 1.97vh;
    color: #fff;
}
.center-ct p:last-child{
    font-size: 1.72vh;
    color: #ffffff96;
}
main{
    margin-top: 2.46vh;
}
main a>section{
    padding-bottom: 18.47vh;
}
main .dj{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3.08vh;
    position: relative;
    z-index: 10;
}
main .dj>p:first-of-type{
    width: 2.21vh;
    height: 2.21vh;
    background-color: #fff;
    border-radius: 50%;
}
main .dj>img:first-of-type{
    width: 16.13vh;
    transform: rotate(37deg);
    position: relative;
    top: 2.34vh;
    left: 4.56vh;
}
main .cd{
    width: 31.28vh;
    height: 31.28vh;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: cd 20s linear infinite;
}
@keyframes cd{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
main .cd img{
    width: 24.6vh;
    height: 24.6vh;
    border-radius: 50%;
}
footer{
    width: 100vw;
    padding-bottom: 4.92vh;
    /* background-color: red; */
}
footer .love{
    /* background-color: pink; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3.07vh 0 4.92vh;
}
footer .love i{
    font-size: 3.32vh;
    color: white;
}
footer .love>img{
    height: 2.8vh;
}
footer .love div:nth-of-type(1) img{
    height: 2.8vh;
}
footer .love div:nth-of-type(2) img{
    transform: rotate(90deg);
    width: 2.8vh;
}
footer .love div:nth-of-type(1){
    position: relative;
}
footer .love div:nth-of-type(1) sup{
    font-size: 1.72vh;
    color: #fff;
    position: absolute;
    top: -2.8vh;
    left: 2.83vh;
    font-weight: bold;
}
footer .bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.23vh;
    margin-top: 4.68vh;
}
footer .bar .bar-box{
    width: 76vw;
    height: 0.37vh;
    padding: 0.98vh 0;
    overflow: hidden;
}
footer .bar .bar-ct{
    width: 76vw;
    height: 0.37vh;
    background-color: #A0A7A7;
    position: relative;
}
footer .bar .bar-ct .bar-move{
    width: 76vw;
    height: 0.37vh;
    background-color: #fff;
    position: absolute;
    left: calc((76vw - 0.98vh - .2rem) * -1);
    top: 0;
    animation: bar 231s linear infinite;
}
@keyframes bar{
    0%{
        left: calc((76vw - 0.98vh - .2rem) * -1);
    }
    100%{
        left: 0;
    }
}
footer .bar .bar-ct .bar-move p{
    width: 0.98vh;
    height: 0.98vh;
    border-radius: 50%;
    background-color: #fff;
    border: .1rem solid #A0A7A7;
    position: absolute;
    top: calc(0.98vh / -2);
    right: 0;
}
footer .bar span{
    font-size: 1.47vh;
    color: #fff;
}
footer .loop{
    margin-top: 3.07vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.23vh 0 3.69vh;
}
footer .loop a:first-of-type i{
    font-size: 2.95vh;
    color: #F3F4F4;
}
footer .loop a:nth-of-type(2) i{
    font-size: 3.08vh;
    color: #F3F4F4;
}
footer .loop a:nth-of-type(3) b{
    color: #F3F4F4;
    font-size: 6.15vh;
}
footer .loop a:nth-of-type(4) i{
    font-size: 3.08vh;
    color: #F3F4F4;
}
footer .loop img{
    width: 3.2vh;
}

main{
    /* display: none; */
}
footer .love{
    /* display: none; */
}

.ci{
    width: 100vw;
    height: 69vh;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    display: none;
}
.ci::-webkit-scrollbar{
    display: none;
}
.ci a div{
    color: #666;
    font-size: 1.97vh;
    text-align: center;
}
.ci a div p:nth-of-type(8){
    color: white;
    transform: scale(1.15);
}
#ci:target~main{
    display: none;
}
#ci:target~footer .love{
    display: none;
}
#ci:target~.ci{
    display: flex;
}